<template>
    <div class="">
        <div class="top-group">
            <el-button type="primary" @click="onAddCase">
                <el-icon :size="15" style="padding-right: 5px;">
                    <Plus />
                </el-icon>新增用例</el-button>
        </div>

        <el-table :data="project.case_list" style="width: 100%">
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="description" label="描述">
            </el-table-column>
            <el-table-column label="创建时间">
                <template v-slot="scope">
                    {{ $filters.format(scope.row.create_time)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width=300>
                <template v-slot="scope">
                    <el-button type="primary" size="mini" @click="onRunCase(scope.row, scope.$index)">运行</el-button>
                    <el-button size="mini" @click="onEditCase(scope.row, scope.$index)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="onDeleteCase(scope.row, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="运行结果" v-model="dialogVisible" width="80%">
            <el-table :data="records" height="500">
                <el-table-column fixed property="url" label="url" width="150"></el-table-column>
                <el-table-column property="http_method" label="请求方法" width="100"></el-table-column>
                <el-table-column property="headers" label="请求头"></el-table-column>
                <el-table-column property="data" label="请求体"></el-table-column>
                <el-table-column property="return_code" label="状态码" width="80"></el-table-column>
                <el-table-column property="return_content" label="响应体"></el-table-column>
                <el-table-column property="run_result" label="测试结果" width="100">
                    <template v-slot="scope">
                        <el-tag type="success" v-if="scope.row.run_result == true">成功</el-tag>
                        <el-tag type="danger" v-if="scope.row.run_result == false">失败</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
    
<script type="text/ecmascript-6">
import pagetype from "./pagetype.js"
export default {
    name: "CaseList",
    props: ['project'],
    data() {
        return {
            dialogVisible: false,
            records: []
        }
    },
    components: {},
    methods: {
        onAddCase() {
            this.$emit('page-changed', pagetype.ADD_CASE)
        },
        onRunCase(caseobj, index) {
            // this.$loading.show()
            this.$http.runCase(caseobj.id).then(res => {
                // this.$loading.hide()
                const case_record = res.data
                const records = case_record.api_records
                for (let record of records) {
                    if (record.return_code == record.api.expect_code) {
                        record.run_result = true
                    } else {
                        record.run_result = false
                    }
                }
                this.records = records
                this.dialogVisible = true
            })
        },
        onEditCase(caseobj, index) {
            this.$emit('page-changed', pagetype.ADD_CASE, caseobj)
        },
        onDeleteCase(caseobj, index) {  }
    }
}
</script>
    
<style scoped lang='scss'>
.top-group {
    padding: 10px 0;
}
</style>